/*
 * @Author: your name
 * @Date: 2021-12-12 22:06:25
 * @LastEditTime: 2022-05-25 16:48:41
 * @LastEditors: lyztroy lyztroy@bupt.edu.cn
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AEp
 * @FilePath: /visualNotes/src/modules/ToolsList/index.tsx
 */
import React from "react";
import { CommonHeader } from "@/components/Layout/Header";
import ToolItem from "./components/toolItem";
import style from "./index.module.less";
const ToolsList = () => {
  const list = [
    {
      title: "用例图",
      desc: "以用户的角度拆分系统功能",
      router: "/diagram/useCase",
      bgImg:
        "http://www.zhiruisiwei.com/html/image3/m3_31800.png",
    },
    {
      title: "模块定义图",
      desc: "定义系统中各种类型的元素及其关系",
      router: "/diagram/category",
      bgImg:
        "http://www.zhiruisiwei.com/html/image3/m3_11800.png",
    },
    {
      title: "需求图",
      desc: "该工具可用于分析系统的结构性",
      router: "/diagram/collaboration",
      bgImg:
        "http://www.zhiruisiwei.com/html/image3/m9800.png",
    },
    {
      title: "状态机图",
      desc: "该工具可用于分析系统状态的转变",
      router: "/diagram/status",
      bgImg:
        "http://www.zhiruisiwei.com/html/image3/m3_41800.png",
    },
    {
      title: "参数图",
      desc: "该工具用于说明系统设计约束。",
      router: "/diagram/parameter",
      bgImg:
        "http://www.zhiruisiwei.com/html/image3/m3_21800.png",
    },
    {
      title: "包图",
      desc: "定义包之间的层次关系，及其包含的元素。",
      router: "/diagram/package",
      bgImg:
        "http://www.zhiruisiwei.com/html/image3/m3_22800.png",
    },
    {
      title: "活动图",
      desc: "通过各种活动来描述系统的行为。",
      router: "/diagram/activity",
      bgImg:
        "http://www.zhiruisiwei.com/html/image3/m3_32800.png",
    },
    {
      title: "序列图",
      desc: "说明随着时间推移而发生的行为和事件的序列。",
      router: "/diagram/seq",
      bgImg:
        "http://www.zhiruisiwei.com/html/image3/m3_43.png",
    },
    {
      title: "内部模块图",
      desc: "用来说明一个模块的内部结构。",
      router: "/diagram/ibd",
      bgImg:
        "http://www.zhiruisiwei.com/html/image3/m3_12800.png",
    },
  ];
  return (
    <div className={style.container}>
      <CommonHeader />
      <div>
        <div className={style.title}>新建工具</div>
        <div className={style.toolItemContainer}>
          {list.map((item, index) => (
            <ToolItem {...item} key={index}></ToolItem>
          ))}
        </div>
      </div>
    </div>
  );
};
export default ToolsList;
